<template>
  <div>
    <div class="flex-col">
      <el-popover v-model="popoverVisible" trigger="click" :width="selectType === 'user' ? 520 : selectType === 'vendor' ? 610 : selectType === 'vendorPo' ? 400 : selectType === 'project' ? 580 : selectType === 'customer' ? 680 : null ">
        <el-input v-if="!disabled" v-model="queryStr" v-on:input="queryList" clearable :placeholder="placeholder">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <span v-show="selectType === 'vendor' && goPath" class="item_tips" @click="goVendor">{{$t('components.popoverSelect.cantFindVendor')}}</span>
        <span v-show="selectType === 'customer' && goPath" class="item_tips" @click.stop="goCustomer">{{$t('components.popoverSelect.cantFindTheCustomer')}}</span>
        <el-table v-if="!disabled" :data="list" :empty-text="$t('placeholder.emptyText')" class="yt-table yt-temporary" style="width: 100%;margin-top: 10px" border  v-loading="loading" element-loading-spinner="el-icon-loading" max-height="600">
          <el-table-column type="index" align="center" :label="$t('travelManagement.travelApplicationDetails.serialNumber')" width="60"/>
          <el-table-column v-for="item in colList" :key="item.label" align="center" :label="item.label" :prop="item.prop"  :min-width="item.widt ? item.widt : ''" v-if="item.imshow"/>
          <el-table-column align="center" width="80" :label="$t('travelManagement.travelApplicationDetails.operate')">
            <template slot-scope="scope">
              <el-button size="mini" style="padding: 3px 10px;margin: 6px 5px" @click="select(scope.row)">{{$t("travelManagement.travelApplicationDetails.select") }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-input :disabled="disabled" @focus.stop="queryList" :class="{ 'showHowver':value !== '' }" readonly slot="reference" :placeholder="placeholder" v-model="value">
          <i slot="suffix" :class="showI ? 'down': 'up'" class="el-icon-arrow-down" style="line-height: 36px;width: 25px;height: 100%;font-size: 14px"></i>
          <i @click.stop="dele" slot="suffix" :class="{ 'el-icon-error': !disabled }" style="line-height: 36px;width: 25px;height: 100%;font-size: 14px;position: absolute;right: 0;display: none"></i>
        </el-input>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { getUserList, getVendorList, getProjectList, getCustomerList } from '@/api/dict/dictValue/index'; // 选择人员,厂商,专案,客户
import { getVendorPoNoAndNameByProgressId } from '@/api/scheduleManager/worksDetails';
export default {
  props: {
    // 查询类型名称(user,vendor,project,customer)
    selectType: {
      type: String,
      default: ''
    },
    // 绑定的字符串值
    value: {
      type: String,
      default: ''
    },
    // 赋值的对象名称
    valueObjName: {
      type: String,
      default: ''
    },
    // 专案追踪id
    progressId: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default() {
        return this.$t('scheduleManager.vendorConsumables.placeholder.userNo')
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    projectYear: {
      type: String,
      default: ''
    }
  },
  watch: {
    popoverVisible(val) {
      if (!val) {
        this.queryStr = ''
        this.showI = true
      }
      if (val) {
        this.showI = false
      }
    }
  },
  data() {
    return {
      queryStr: '',
      popoverVisible: false,
      loading: false,
      showI: true,
      goPath: false,
      list: [],
      year: '',
      colObj: {
        user: [
          { label: this.$t('components.popoverSelect.user.username'), prop: 'username', widt: 70 ,imshow:true},
          { label: this.$t('components.popoverSelect.user.name'), prop: 'name', widt: 110 ,imshow:true},
          { label: this.$t('components.popoverSelect.user.ename'), prop: 'ename', widt: 150 ,imshow:true},
          { label: this.$t('components.popoverSelect.user.id'), prop: 'id', widt: 150 ,imshow:false}
        ],
        vendor: [
          { label: this.$t('components.popoverSelect.vendor.vendorNo'), prop: 'vendorNo', widt: 90 ,imshow:true},
          { label: this.$t('components.popoverSelect.vendor.vendorName'), prop: 'vendorName', widt: 230 ,imshow:true},
          { label: this.$t('components.popoverSelect.vendor.vendorShortName'), prop: 'vendorShortName', widt: 110,imshow:true }
        ],
        vendorPo: [
          { label: this.$t('components.popoverSelect.vendorPo.vendorName'), prop: 'vendorName', widt: 110 ,imshow:true},
          { label: this.$t('components.popoverSelect.vendorPo.vendorPoNo'), prop: 'vendorPoNo', widt: 120 ,imshow:true}
        ],
        project: [
          { label: this.$t('components.popoverSelect.project.projectNo'), prop: 'projectNo', widt: 70 ,imshow:true},
          { label: this.$t('components.popoverSelect.project.projectName'), prop: 'projectName', widt: 240 ,imshow:true}
        ],
        customer: [
          { label: this.$t('components.popoverSelect.customer.customerNo'), prop: 'customerNo', widt: 110 ,imshow:true},
          { label: this.$t('components.popoverSelect.customer.customerName'), prop: 'customerName', widt: 250 ,imshow:true},
          { label: this.$t('components.popoverSelect.customer.customerShortName'), prop: 'customerShortName', widt: 150 ,imshow:true}
        ]
      },
      colList: []
    }
  },
  mounted() {
    this.colList = this.colObj[this.selectType]
    this.popoverVisible = this.visible
  },
  methods: {
    select(row) {
      // 为绑定的对象赋值
      if (this.valueObjName) {
        console.info(11111+this.valueObjName)
        this.$emit('update:value', row[this.valueObjName])
        this.$emit('input', row[this.valueObjName], row)
      } else {
        if (this.selectType === 'user') {
          $('#projectEngineerId').val(row.id);
          $('#projectEngineer').val(row.name);
          this.$emit('input', row.username, row)
        } else if (this.selectType === 'project') {
          this.$emit('input', row.projectNo, row)
        } else if (this.selectType === 'vendor') {
          this.$emit('input', row.vendorShortName, row)
        } else if (this.selectType === 'customer') {
          this.$emit('input', row.customerNo, row)
        }
        
      }
      this.popoverVisible = false
      // // 为绑定的方法赋值
      this.$emit('setValue', row)
    },
    queryList() {
      this.loading = true
      const obj = {
        limit: 5,
        likeQuery: this.queryStr
      }
      if (this.selectType === 'user') {
        obj.year = this.projectYear
        getUserList(obj).then(res => {
          this.list = res.data.rows
          this.loading = false
        })
      } else if (this.selectType === 'vendor') {
        getVendorList(obj).then(res => {
          this.list = res.data.rows
          this.goPath = this.list && this.list.length === 0
          this.loading = false
        })
      } else if (this.selectType === 'project') {
        getProjectList(obj).then(res => {
          this.list = res.data.rows
          this.loading = false
        })
      } else if (this.selectType === 'customer') {
        getCustomerList(obj).then(res => {
          this.list = res.data.rows
          this.goPath = this.list && this.list.length === 0
          this.loading = false
        })
      } else if (this.selectType === 'vendorPo') {
        if (this.progressId) {
          getVendorPoNoAndNameByProgressId({ progressId: this.progressId, vendorPoNo: this.queryStr }).then(res => {
            this.list = res.data.rows
            this.loading = false
          });
        }
      }
    },
    dele() {
      this.$emit('update:value', '')
      this.$emit('input', '')
      const obj = { id: '' }
      this.$emit('setValue', obj)
    },
    goCustomer() {
      // this.$router.push({ path: '/baseManager/customer' })
      this.$emit('goCustomer', '')
    },
    goVendor() {
      this.$router.push({ path: '/baseManager/vendor' })
    }
  }


}
</script>

<style scoped lang="scss">
  .showHowver:hover {
    .el-icon-error{
      display: inline-block !important;
    }
  }
  .down{
    transition: transform .3s;
    transform: rotateZ(0deg);
  }
  .up{
    transition: transform .3s;
    transform: rotateZ(180deg);
  }
  /deep/ .el-input__inner{
    cursor: pointer;
  }

.item_tips {
  width: 200%;
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  top: 100%;
  left: 0;
  cursor: pointer;
  z-index: 9999
}

</style>
